<template>
  <div class="user_wrap">
    <BreadCrumb crumb="用户管理"></BreadCrumb>
    <div class="top_bar">
      <el-row>
        <el-col :span="8">
          <el-input
            placeholder="请输入搜索内容"
            v-model="keyword"
            class="input-with-select"
            size="small"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="fnGetData(1)"
            ></el-button>
          </el-input>
        </el-col>

        <el-col :span="8" :offset="8"
          ><AddUser @fnGetKey="fnGetKey" class="pull-right"></AddUser
        ></el-col>
      </el-row>
    </div>
    <UserTable :users="aUserList"></UserTable>
    
    <!-- 前端分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total='total'
      :page-size='pagesize'
      :current-page="page"
      style="text-align: center; margin-top: 10px"
      @current-change="fnGetPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import BreadCrumb from "@/components/widget/BreadCrumb";
import AddUser from "@/components/widget/AddUser";
import UserTable from "@/components/widget/UserTable";
import cons from "@/components/constant";
let token = localStorage.token  
export default {
  name: "User",
  data() {
    return {
      keyword: "",
      page: 1,
      total:0, // 总条目数
      pageSize:3, // 定义变量限制一页显示的条数
      aUserList: [],
    };
  },
  components: {
    BreadCrumb,
    AddUser,
    UserTable,
  },
  mounted() {
    // 加载数据
    this.fnGetData(1);
  },

  methods: {
    // 发送GET请求 加载所有用户数据
    fnGetData: function (num) {
     this.axios.get(cons.api+'/v1/users/users/',{
       params:{
         page:num,
         pageSize:this.pageSize
       },
       headers:{
         'Authorization':'JWT '+token
       },
       responseType:'json'
     })
     .then((res) => {
       console.log('加载所有用户数据的响应',res)
      //  解析数据
        if (res.data == 200){
          this.aUserList = res.data.resoult

        }else{
          this.$emssage({
            type:'error',
            message:'加载用户信息错误'
          })
        }
     }).catch((err) => {
       console.log(err)
     });
    },

    // 父组件的事件
    fnGetKey: function () {
      this.fnGetData(1)
    },

    // 翻页触发的方法
    fnGetPage: function (num) {
      this.page = num
      this.fnGetData(num)
    },
  },
};
</script>

<style scoped>
.top_bar {
  width: 95.2%;
  overflow: hidden;
  margin: 10px auto 10px;
}
</style>
